/* 
  webpack 是一个 JavaScript 应用程序的模块打包器(module bundler)
  当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，
  其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。
*/
module.exports = {
  // 入口：指示webpack应该使用哪个模块作为构建内部依赖图的开始。每个依赖被处理，最后输出到bundles的文件中
  entry: "./src/index.tsx", 
  // 出口：告诉webpack在哪里输出它所创建的bundles，以及如何命名这些文件。
  output: {
    filename: "bundle.js", // webpack bundle的名称
    path: __dirname + "/dist"
  },
  /* 
    开发工具：用来控制源映射是否生成和如何生成
    使用这个 SourceMapDevToolPlugin 为了更细粒度的配置. 
    请参见source-map-loader来处理现有的源映射。
  */
  devtool: "source-map",
  /* 
    解析：设置模块如何被解析。
  */
  resolve: {
    //使用此选项，会覆盖默认数组，这就意味着 webpack 将不再尝试使用默认扩展来解析模块。
    //对于使用其扩展导入的模块，例如，import SomeFile from "./somefile.ext"，
    //要想正确的解析，一个包含“*”的字符串必须包含在数组中。
    extensions: [".ts", ".tsx", ".js", ".json"]
  },
  /* 
    loader:用于对模块的源代码进行转换，可以使你在‘import’或‘加载’模块时预处理文件。
    可以将文件从不同的语言（如TypeScript）转换成Javascript，将内联图象转换成data URL。
    允许在js模块中直接写import CSS文件！
    类似于其他构建工具中的任务（task）。
    重要的是要记得，在 webpack 配置中定义 loader 时，要定义在 module.rules 中，而不是 rules。
  */
  module: {
    rules: [
      { 
      // "嘿，webpack编译器，当你碰到[在require()/import语句中被解析为'.tsx'的路径]时，
      // 在你对它打包之前，先使用awesome-typescript-loader转换一下。"
        test: /\.tsx?$/,
        loader: "awesome-typescript-loader"
      },
      {
        enforce: "pre",
        test: /\.js$/,
        loader: "source-map-loader"
      }
    ]
  },
  /* 
    外部扩展：提供了[从输出的bundle中排除依赖]的方法。
    防止将某些 import 的包(package)打包到 bundle 中，
    而是在运行时(runtime)再去从外部获取这些扩展依赖(external dependencies)。
  */
  externals: {
    "react": "React",
    "react-dom": "ReactDOM"
  },
};

// 了解更多请查看官网：https://doc.webpack-china.org/concepts/